<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/1625.5e74537e.chunk.css">
    <link rel="stylesheet" href="/css/1875.e7869e27.chunk.css">
    <link rel="stylesheet" href="/css/2828.b54ede6f.chunk.css">
    <link rel="stylesheet" href="/css/3409.87017755.chunk.css">
    <link rel="stylesheet" href="/css/4881.78d38e08.chunk.css">
    <link rel="stylesheet" href="/css/5892.148c7396.chunk.css">
    <link rel="stylesheet" href="/css/7182.78c3e594.chunk.css">
    <link rel="stylesheet" href="/css/9582.bc863a3d.chunk.css">
    <link rel="stylesheet" href="/ant-design/antd.min.css">

    <link rel="stylesheet" href="/css/layout__index.2d03cb4d.chunk.css">
    <link rel="stylesheet" href="/css/HeaderRight.c8616cce.chunk.css">
    <link rel="stylesheet" href="/css/p__NewInfoManage__index.d7c8a480.chunk.css">
    <link rel="stylesheet" href="/css/PageAlert.8c7e7f3e.chunk.css">
    <link rel="stylesheet" href="/css/umi.717090dc.css">

    <link rel="stylesheet" src="/publict__plugin-layout__Layout.49cdc665.chunk.css">

</head>

<style>
    /* 遮罩层 */
    #overlay {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        font-size: 16px;
        /* IE9以下不支持rgba模式 */
        background-color: rgba(0, 0, 0, 0.5);
        /* 兼容IE8及以下 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
        display: none;
    }

    /* 弹出框主体 */
    .popup {
        background-color: #ffffff;
        max-width: 400px;
        min-width: 200px;
        height: 350px;
        border-radius: 5px;
        margin: 100px auto;
        text-align: center;
    }

    /* 弹出框的标题 */
    .popup_title {
        height: 60px;
        line-height: 60px;
        border-bottom: solid 1px #cccccc;
    }

    /* 弹出框的内容 */
    .popup_content {
        height: 50px;
        line-height: 50px;
        padding: 15px 20px;
    }

    /* 弹出框的按钮栏 */
    .popup_btn {
        padding-bottom: 10px;
    }

    /* 弹出框的按钮 */
    .popup_btn button {
        color: #778899;
        width: 40%;
        height: 40px;
        cursor: pointer;
        border: solid 1px #cccccc;
        border-radius: 5px;
        margin: 5px 10px;
        color: #ffffff;
        background-color: #337ab7;
    }

    .button {
        height: 30px;
        background-color: #0E8CFE;
        color: white;
        border-radius: 5px;
        border-color: #0E8CFE;
    }

    .label_div {
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 5px;
    }

</style>

<body>


<div>
    <div class="ant-card easy-ui-card in___AP3Me" style="margin: 20px">
        <div class="ant-card-head">
            <div class="ant-card-head-wrapper">
                <div class="ant-card-head-title">
                    <div class="easy-ui-card-tip">
                        <div class="easy-ui-card-tip-title">用户基本信息</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ant-card-body">
            <div class="line___D2gQF">
                <div class="ant-row " style="margin-left: -12px; margin-right: -12px; row-gap: 16px;">
                    <div class="ant-col ant-col-8  label_div">
                        <span class="itemfirst___tV05S">真实姓名</span>
                        <span id="cardName" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">手机号码</span>
                        <span id="mobile" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">性别</span>
                        <span id="gender" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">年龄</span>
                        <span id="age" class="item___h4O2y">--</span>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">逾期订单联系人匹配</span>
                        <span id="contactStatus" class="item___h4O2y">--</span>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">黑名单状态</span>
                        <span id="blackStatus" class="item___h4O2y">--</span>
                        <button class="button" onclick="refreshBlack()">更新</button>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">风控状态</span>
                        <span id="machineStatus" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">注册渠道</span>
                        <span id="channelName" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">备注</span>
                        <span id="remark" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">注册时间</span>
                        <span id="createTimeStr" class="item___h4O2y">--</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="ant-card easy-ui-card in___AP3Me" style="margin: 20px">
        <div class="ant-card-head">
            <div class="ant-card-head-wrapper">
                <div class="ant-card-head-title">
                    <div class="easy-ui-card-tip">
                        <div class="easy-ui-card-tip-title">实名信息</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ant-card-body">
            <div class="line___D2gQF">
                <div class="ant-row" style="margin-left: -12px; margin-right: -12px; row-gap: 16px;">
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">姓名</span>
                        <span id="cardName_a" class="item___h4O2y">--</span>
                    </div>
                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">身份证号码</span>
                        <span id="cardNum" class="item___h4O2y">--</span>
                    </div>

                    <div class="ant-col  ant-col-8 label_div" style="width: 900px">
                        <span class="itemfirst___tV05S">身份证地址</span>
                        <span id="cardAddress">--</span>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">身份证正面照片</span>
                        <a id="idCardPicFront_a" target="_blank">
                            <img id="idCardPicFront" class="ant-image-img image___YGDd8"
                                 style="height: 120px; width: 120px">
                        </a>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">身份证反面照片</span>
                        <a id="idCardPicBack_a" target="_blank">
                            <img id="idCardPicBack" class="ant-image-img image___YGDd8"
                                 style="height: 120px; width: 120px">
                        </a>
                    </div>

                    <div class="ant-col ant-col-8 label_div">
                        <span class="itemfirst___tV05S">人脸照片</span>
                        <a id="facePhoto_a" target="_blank">
                            <img id="facePhoto" class="ant-image-img image___YGDd8"
                                 style="height: 120px; width: 120px">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="ant-card easy-ui-card in___AP3Me" style="margin: 20px">
<!--        <div class="ant-pro-card-header ant-pro-card-header-border">-->
<!--            <div class="ant-pro-card-title">紧急联系人</div>-->
<!--            <button onclick="showPopup()">新增</button>-->
<!--        </div>-->
        <div class="ant-pro-card-body">
            <div class="ant-table-wrapper">
                <div class="ant-spin-nested-loading">
                    <div class="ant-table">
                        <div class="ant-table-container">
                            <div class="ant-table-content">
                                <table style="table-layout: auto;">
                                    <thead class="ant-table-thead">
                                    <tr>
                                        <th class="ant-table-cell">姓名</th>
                                        <th class="ant-table-cell">手机号码</th>
                                        <th class="ant-table-cell">关系</th>
                                    </tr>
                                    </thead>
                                    <tbody id="contract_body" class="ant-table-tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ant-card easy-ui-card in___AP3Me" style="margin: 20px">
        <div class="ant-pro-card-header ant-pro-card-header-border">
            <div class="ant-pro-card-title">绑定银行卡</div>
        </div>
        <div class="ant-pro-card-body">
            <div class="ant-table-wrapper">
                <div class="ant-spin-nested-loading">
                    <div class="ant-table">
                        <div class="ant-table-container">
                            <div class="ant-table-content">
                                <table style="table-layout: auto;">
                                    <thead class="ant-table-thead">
                                    <tr>
                                        <th class="ant-table-cell">银行名称</th>
                                        <th class="ant-table-cell">卡号</th>
                                        <th class="ant-table-cell">预留手机号</th>
                                    </tr>
                                    </thead>
                                    <tbody id="bank_card_body" class="ant-table-tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/jquery-3.5.1.min.js"></script>
<script src="/app.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">

    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);

    let userId;

    getUserDetail()

    function getUserDetail() {
        let orderId = urlSearchParams.get('orderId');
        let param_userId = urlSearchParams.get('userId');

        let url = requestUrl + "/erupt-api/user/detail";
        $.ajax({
            type: "POST",
            url: url,
            headers: {
                token: jsonObj.token
            },
            data: {
                orderId: orderId,
                userId: param_userId,
            },
            datatype: "json",
            success: function (result) {
                console.log(result)
                if (result.code === 1) {
                    userId = result.data.id;
                    appendDate(result.data);
                } else {
                    alert(result.msg)
                }
            }
        });
    }

    function refreshBlack(){
        let url = requestUrl + "/erupt-api/black/update";
        $.ajax({
            type: "POST",
            url: url,
            headers: {
                token: jsonObj.token
            },
            data: {
                userId: userId,
            },
            datatype: "json",
            success: function (result) {
                if (result.code === 1) {
                    appendDate(result.data);
                    alert('更新成功')
                } else {
                    alert(result.msg)
                }
            }
        });
    }

    function showPopup() {
        let overlay = document.getElementById("overlay");
        overlay.style.display = "block";
    }

    function cancelPopup() {
        let overlay = document.getElementById("overlay");
        overlay.style.display = "none";
    }

    function appendDate(resData) {
        if (resData.contactByMybatisList && resData.contactByMybatisList.length > 0) {
            let contractInfo = ''
            for (let i = 0; i < resData.contactByMybatisList.length; i++) {
                let item = resData.contactByMybatisList[i]
                contractInfo += '<tr data-row-key="360407293" className="ant-table-row ant-table-row-level-0" >' +
                    '<td class="ant-table-cell">' + item.name + '</td>' +
                    '<td class="ant-table-cell">' + item.mobile + '</td>' +
                    '<td class="ant-table-cell">' + getContactRelation(item.relation) + '</td>' +
                    '</tr>'
            }
            inputById(contractInfo, 'contract_body')
        }

        let bank_Info = ''
        if (resData.bankList) {
            for (let i = 0; i < resData.bankList.length; i++) {
                let item = resData.bankList[i]
                bank_Info += '<tr data-row-key="360407293" className="ant-table-row ant-table-row-level-0" >' +
                    '<td class="ant-table-cell">' + item.bankName + '</td>' +
                    '<td class="ant-table-cell">' + item.carNo + '</td>' +
                    '<td class="ant-table-cell">' + item.phone + '</td>' +
                    '</tr>'
            }
            inputById(bank_Info, 'bank_card_body')
        }

        if (resData.channel) {
            inputById(resData.channel.name, 'channelName')
        }

        for (let key in resData) {
            inputById(resData[key], key)
        }
    }


    function getContactRelation(data) {
        if (data === 1) return '父母'
        if (data === 2) return '子女'
        if (data === 3) return '兄弟姐妹'
        if (data === 4) return '朋友'
        if (data === 5) return '配偶'
        if (data === 6) return '亲戚'
        if (data === 7) return '同学'
        if (data === 8) return '同事'
        if (data === 9) return '其他'
    }

    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data

            if (data === null) {
                return;
            }

            if (idName === 'gender') {
                if (data === 1) {
                    document.getElementById(idName).innerHTML = '男'
                } else if (data === 2) {
                    document.getElementById(idName).innerHTML = '女'
                }
            }

            if (idName === 'contactStatus') {
                if (!data) {
                    document.getElementById(idName).innerHTML = '命中'
                    document.getElementById(idName).style.color = 'red'
                } else {
                    document.getElementById(idName).innerHTML = '正常'
                    document.getElementById(idName).style.color = 'black'
                }
            }

            if (idName === 'machineStatus') {
                if (!data) {
                    document.getElementById(idName).innerHTML = '命中'
                    document.getElementById(idName).style.color = 'red'
                } else {
                    document.getElementById(idName).innerHTML = '正常'
                    document.getElementById(idName).style.color = 'black'
                }
            }

            if (idName === 'blackStatus') {
                if (!data) {
                    document.getElementById(idName).innerHTML = '命中'
                    document.getElementById(idName).style.color = 'red'
                } else {
                    document.getElementById(idName).innerHTML = '正常'
                    document.getElementById(idName).style.color = 'black'
                }
            }


            if (idName === 'idCardPicFront' || idName === 'idCardPicBack' || idName === 'facePhoto') {
                let fileUrl = data
                if (!data.startsWith('http')) {
                    fileUrl = window.eruptSiteConfig.fileDomain + data
                }
                document.getElementById(idName).setAttribute("src", fileUrl)
                document.getElementById(idName + '_a').href = fileUrl
            }


            if (idName === 'ocrSex') {
                if (data === 1) document.getElementById(idName).innerHTML = '男'
                if (data === 2) document.getElementById(idName).innerHTML = '女'
            }

            if (idName === 'cardName') {
                document.getElementById(idName).innerHTML = data
                document.getElementById(idName + '_a').innerHTML = data
            }
        }
    }
</script>

</body>
</html>